<template>
  <div class="custom-body">
    <el-alert
      v-if="template !== undefined && template.name !== undefined"
      :title="template.name+' - 基础配置项'"
      :closable="false"
      type="success"
      show-icon
    />
    <el-alert
      v-else
      title="未选择模版"
      type="success"
      :closable="false"
      show-icon
    />
    <component :is="templateName" v-if="templateName" :template="template" @fetch-data="callBack" />
  </div>
</template>

<script>
export default {
  name: 'TemplateSettingIndex',
  data() {
    return {
      ssdl: '',
      ssfl: '',
      type: '',
      template: {},
      templateName: null
    }
  },
  watch: {
    template: {
      handler(newName, oldName) { // 值发生变化时
        if (undefined !== newName &&
          undefined !== newName.ssdl &&
          undefined !== newName.ssfl &&
          undefined !== newName.tempName
        ) {
          this.type = newName.tempName
          this.ssdl = newName.ssdl.bm
          this.ssfl = newName.ssfl.bm
          const res = () => import(`./${this.ssdl}/${this.ssfl}/${this.type}`)
          this.templateName = res
        } else {
          this.templateName = null
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initData(data) {
      this.template = data
    },
    callBack(data) {}
  }
}
</script>

<style scoped>

</style>
